<template>
	<view class="analyse">
		<view class="header">
			<view class="form">
				<view class="select">
					<input type="text" placeholder="供应商名" v-model="query.sname" @input="change" />
					<view class="select_btn">
						<view class="" @tap="search">查询</view>
						<view @tap="skip('/pages/purchasing/addSupplier')" class="">添加</view>
					</view>
				</view>
			</view>
		</view>
		<view class="article">
			<table border="0">
				<tr>
					<th>供应商</th>
					<th>手机</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
				<block v-if="total > 0">
					<tr v-for="(item, index) in list" :key="index">
						<td>{{ item.sname || '-' }}</td>
						<td>{{ item.supMobile || '-' }}</td>
						<td>{{ item.supAddress || '-' }}</td>
						<td>
							<view class="btns">
								<view class="button-mini" @tap="edit(item)">修改</view>
								<view class="button-mini" @tap="del(item.id)">删除</view>
							</view>
						</td>
					</tr>
				</block>

				<tr v-else>
					<td colspan="7"><u-divider textSize="34" text="暂无数据"></u-divider></td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
export default {
	name: 'supplier',
	data() {
		return {
			query: {
				pageNo: 1,
				pageSize: 15,
				sname: ''
			},
			list: [],
			total: 0,
			supplierListIndex: undefined
		};
	},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.getList();
		}
	},
	onLoad() {
		// this.getList(true);
	},
	onShow(){
		this.getList(true);
	},
	methods: {
		del(id) {
			uni.showModal({
				title: '删除',
				content: '确定删除',
				success: res => {
					if (res.confirm) {
						this.$api
							.supplierDelApi({
								id
							})
							.then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none',
									mask: true
								});
								this.getList(true);
							});
					}
				}
			});
		},
		edit(e) {
			if (e.id) {
				uni.$u.route({
					type: 'navigateTo',
					url: 'pages/purchasing/addSupplier',
					params: {
						id: e.id || '',
						user: e.sname || '',
						phone: e.supMobile || '',
						address: e.supAddress || '',
						remark: e.remark || '',
						sid: e.sid || '',
						sort: e.sort
					}
				});
			}
		},
		change(e) {
			if (!e.detail.value) {
				this.list = [];
				this.getList(true);
			}
		},
		search() {
			// if (!this.query.keyword) {
			// 	uni.showToast({
			// 		title: '搜索不能为空',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			this.list = [];
			this.getList(true);
		},
		getList(first) {
			// uni.showLoading({
			// 	title: '加载中...'
			// });

			let query = uni.$u.deepClone(this.query);
			if (first) {
				this.list = [];
				query.pageNo = 1;
			} else {
				query.pageNo += 1;
			}
			this.$api.supplierListApi({data:query}).then(res => {
				// uni.hideLoading();
				if (res.result.list && res.result.list.length) {
					this.query.pageNo = query.pageNo;
					let list = res.result.list;
					this.list = [...this.list, ...list];
				}
				this.total = res.result.total;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.analyse {
	.header {
		padding: 16rpx 29rpx;
		background-color: #fff;
	}
	.btns {
		display: flex;
		.button-mini {
			flex: 1;
			margin: 0 12rpx;
		}
	}

	.form {
		.select {
			display: flex;

			.text {
				margin: 20rpx 0;
				color: #bdbdbd;

				text {
					color: #fe3430;
				}
			}

			input {
				text-indent: 1em;
				height: 94rpx;
				background: #f2f2f2;
				border-radius: 47rpx;
			}

			.input {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					text-align: left;
				}
			}

			.select_btn {
				display: flex;
				align-items: center;

				view {
					background: #fe3430;
					width: 150rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 49rpx;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					margin-left: 20rpx;
				}
			}
		}
	}
}
.article {
	padding: 32rpx 20rpx;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30rpx;
		.text {
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #272727;
		}
		.add_btn {
			height: 60rpx;
			line-height: 60rpx;
			background: #fe3430;
			border-radius: 29rpx;
			color: #fff;
			padding: 0 20rpx;
		}
	}
	.price {
		color: #fe3430;
	}
	table {
		border-radius: 20rpx;
		background-color: #fff;
		width: 100%;
		th {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #f1f1f1;
		}
		td {
			padding: 32rpx 0;
			text-align: center;
		}
	}
}
</style>
